<template>
    <div class="customBox modelBox">
        <h3 class="title">
            <el-input v-model="searchKey" clearable placeholder="关键字"></el-input>
            <el-button class="addButton" style="margin: 0 0 0 20px;" type="primary" size="mini" round @click="refresh"
                circle title="刷新">
                <i class="el-icon-refresh"></i>
            </el-button>
            <el-button class="addButton" type="success" size="mini" round @click="addHeaderKey" circle title="添加">
                <i class="el-icon-plus"></i>
            </el-button>
        </h3>

        <div class="customBox-body">
            <div class="empty" v-if="!items.length">
                暂无数据
            </div>

            <el-card style="margin:0 0 10px 0" v-for="item in items" :key="item.urlId">
                <div slot="header" class="clearfix">
                    {{item.name}}
                    <el-button class="deleteButton" type="danger" @click="deleteItem(item)" icon="el-icon-delete"
                        size="mini" circle title="删除">
                    </el-button>
                    <el-button class="editButton" type="primary" @click="editItem(item)" icon="el-icon-edit" size="mini"
                        circle title="编辑">
                    </el-button>
                </div>
                <div>
                    <div class="text">key值：{{item.key}}</div>
                    <div class="text">当前值 ：{{item.value}}</div>
                </div>
            </el-card>
        </div>

        <el-dialog :title="activeObject.cacheId?'修改缓存':'创建缓存'" destroy-on-close :close-on-click-modal="false"
            append-to-body :class="theme" :visible.sync="showValueEditor" width="800px">
            <el-form :model="activeObject" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="缓存名称" prop="name">
                    <el-input v-model="activeObject.name" :disabled="!!activeObject.cacheId"></el-input>
                </el-form-item>
                <el-form-item label="缓存关键字" prop="key">
                    <el-input v-model="activeObject.key" :disabled="!!activeObject.cacheId"></el-input>
                </el-form-item>
                <el-form-item label="当前缓存值" prop="value">
                    <el-input v-model="activeObject.value" type="textarea" rows="10" resize="none">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveValue('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        data() {
            return {
                rules: {
                    name: { required: true, message: '名称不能为空', trigger: 'blur' },
                    key: { required: true, message: '缓存关键字不能为空', trigger: 'blur' }
                },
                searchKey: '',
                readonly: true,
                activeObject: {
                    name: '',
                    key: '',
                    value: ''
                },
                showValueEditor: false,
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme,
            }),
            ...mapState("cache", {
                cacheArray: state => state.cacheArray,
            }),
            items: function () {
                let _search = this.searchKey;
                let reg = new RegExp(_search, 'ig'); // 不区分大小写
                if (_search) {
                    return this.cacheArray.filter(function (item) {
                        if (item.name.toString().match(reg) || item.key.toString().match(reg)) {
                            return item;
                        }
                    });
                }
                return this.cacheArray;
            },
        },
        methods: {
            refresh() {
                this.$store.dispatch('cache/getRenderData');
            },
            addHeaderKey() {
                this.activeObject = {
                    cacheId: false,
                    key: '',
                    name: '',
                    value: ''
                };
                this.showValueEditor = true;
            },
            editItem(item) {
                this.activeObject = JSON.parse(JSON.stringify(item));
                this.showValueEditor = true;
            },
            deleteItem(item) {
                var confirm = this.$confirm('是否删除缓存数据？');
                if (confirm) {
                    this.$store.dispatch('cache/deleteCache', item.cacheId);
                };
            },
            saveValue(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.activeObject.cacheId) {
                            var confirm = this.$confirm('是否更新缓存数据？');
                            if (confirm) {
                                this.$store.dispatch('cache/updataCache', {
                                    id: this.activeObject.cacheId,
                                    key: this.activeObject.key,
                                    value: this.activeObject.value,
                                    name: this.activeObject.name,
                                    callback: () => {
                                        this.showValueEditor = false;
                                    }
                                });
                            };
                        } else {
                            var confirm = this.$confirm('是否创建缓存数据？');
                            if (confirm) {
                                this.$store.dispatch('cache/creatCache', {
                                    key: this.activeObject.key,
                                    value: this.activeObject.value,
                                    name: this.activeObject.name,
                                    callback: () => {
                                        this.showValueEditor = false;
                                    }
                                });
                            };
                        };
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
    };
</script>
<style scoped>
    .title {
        display: flex;
        height: 40px;
        align-items: center;
    }

    .addButton {
        width: 28px;
        height: 28px;
    }

    .empty {
        text-align: center;
        line-height: 100px;
        color: #aaa;
    }

    .text {
        color: #999;
        line-height: 28px;
    }

    .deleteButton {
        float: right;
    }

    .editButton {
        float: right;
        margin: 0 10px 0 0;
    }
</style>